reactjs - TypeScript: Ý bạn có muốn gọi biểu thức này không?

Tôi có một component React yêu cầu một prop có kiểu string. Tôi cũng có một hàm trả về string, nó có kiểu (value: any): string.

Khi tôi cố gắng truyền nó vào component của mình <Component stringProp={myFunction("value")} /> tôi nhận được lỗi:

Type '(value: any) => string' is not assignable to type 'string'.ts(2322)

Tôi nên viết kiểu cho myFunction như thế nào hoặc để sử dụng hàm này trong prop? Tôi không muốn gọi nó bên ngoài component nếu có thể.

Câu trả lời #1

Tôi gợi ý bạn sử dụng interface như sau vì bằng cách này bạn có thể xử lý prop của mình và bạn có thể truyền cho nó một hàm hoặc một chuỗi:

interface Props {
 YOUR_PROP_NAME : (value? : any) => string | string
};

và sử dụng nó trong thành phần của bạn

const App : React.FC<Props> = (props) => {
    return (
        <>
            {typeof props.YOUR_PROP_NAME  === "string" ? <div>{props.YOUR_PROP_NAME}</div> :  <div>{props.YOUR_PROP_NAME()}</div>}
        </>
    );
};

export default App;

Câu trả lời #2

Có vẻ như vấn đề của bạn như sau. Bạn đã chỉ định rằng thành phần của bạn nhận một string làm prop, nhưng bạn đang truyền cho nó một hàm. Bạn sẽ cần cập nhật giao diện props để không mong đợi một chuỗi, mà thay vào đó là một hàm trả về một chuỗi. Nó sẽ trông giống như sau.

interface Props {
    getString: (value: any) => string;
}

Bây giờ thành phần của bạn không còn mong đợi một chuỗi, mà là một hàm phù hợp với kiểu mà bạn đang truyền vào.