React js：如何在存储在变量中的 JSX 组件中设置道具

Question

假设我已经定义了一个组件：

class Co extends React.Component {
    render = () => {
        const name = this.props.name;
        return (
            <p>Hello, my name is {name}</p>
        )
    }
}

并将其存储在一个变量中：

const co = <Co />;

如何使用变量设置组件的道具？ co.props.set 行得通吗？

Answer 1

您可以照常设置道具

<Co name="Name"/>

如果元素是某个组件的子元素，那么您可以使用 React.cloneElement()

class Parent extends React.Component {
    render = () => {
        const name = this.props.name;
        return (
            <SomeComp><Co/></SomeComp>
        )
    }
}
class SomeComp extends React.Component {
    render = () => {
        const name = this.props.name;
        return (
            <SomeComp>{React.cloneElement(this.props.children, {name:"Name"})}</SomeComp>
        )
    }
}

Answer 2

据我了解，您不想使用 JSX 语法而是使用存储的变量来呈现您的组件。你可以看看React.cloneElement。这应该可以满足您的要求：

{React.cloneElement(co, {name: 'hans'})}

参见：https://facebook.github.io/react/docs/top-level-api.html#react.cloneelement

React js：如何在存储在变量中的 JSX 组件中设置道具

React js: How to set props in JSX components which store in variable

javascript

reactjs

react-jsx