Question

＆＃13;

const Parent = ({ username, children }) => {
let firstName = username.split(" ")[0];
let lastName = username.split(" ")[1];

// NOTE: Replace {children} with React.cloneElement(children,{firstName,lastName}) 
return (
<div>
<h1>`Welcome user {lastName}, {firstName}`</h1>
  {children}
  
</div>
);
}

const QuoteDisplay = ({firstName, lastName, randomQuote}) => {
       return(
       <h2>`{firstName}, {lastName} your quote for the day is: {randomQuote}`</h2>
       );
    }

QuoteDisplay.propTypes = {
    firstName:  React.PropTypes.string.isRequired,
    lastName:  React.PropTypes.string.isRequired,
    randomQuote:  React.PropTypes.string
    }

    
class App extends React.Component{
  render() {
    return (<Parent username="funny Tom" > <QuoteDisplay randomQuote="Solve it" /></Parent>);
    }
 }
 
 ReactDOM.render(<App />, document.getElementById('app'));

＆＃13;

<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js"></script>

＆＃13;

我有一个父组件和不同的子组件。我想在父母中插入和玩不同的孩子。然而，儿童可能需要一些共同的父道具。这就是我现在这样做的方法（上面的代码片段）。请注意父类定义如下，我无法在上面的编辑器中调用React.clone所以我必须强调下面的区别

父：

const Parent = ({ username, children }) => {
let firstName = username.split(" ")[0];
let lastName = username.split(" ")[1];
return (
<div>
<h1>`Welcome user {lastName}, {firstName}`</h1>
  {React.cloneElement(children, { firstName: firstName, lastName: lastName })}
</div>
);
}

这样可以正常工作，但它在“应用程序”下的quoteDisplay的prop类型验证失败了。组件因为我没有在那个阶段传递参数。 但是，由于我最终从父母那里传递了用户名，因此它会收到并正常工作。

有哪些更好的方法来处理这种情况？我应该看看像redux或flux这样的东西吗？

添加了代码段（免责声明：这是我的用例的简化示例，可能有更简单的方法来做同样的事情，但请假设现在需要这样做）

Answer 1

理想情况下，您可以将父母认为的道具传递给孩子。所以我会像这样设置您的应用程序：

class App extends React.Component{
  render() {
    return (<Parent username="funny Tom" randomQuote="Solve it"/>);
    }
 }

然后，Parent将获取这些道具并将相关的道具传递给QuoteDisplay。

function Parent(props) {
 let firstName = props.username.split(" ")[0];
 let lastName = props.username.split(" ")[1];

 return (
  <div>
   <h1>`Welcome user {lastName}, {firstName}`</h1>
   <QuoteDisplay firstName={firstName} lastName={lastName} randomQuote={props.randomQuote} />
 </div>
 );
}

最后，QuoteDisplay接受道具。

function QuoteDisplay(props) {
   return(
     <h2>`{props.firstName}, {props.lastName} your quote for the day is: {props.randomQuote}`</h2>
   );
}

如何为子组件执行prop类型验证？

1 个答案: